<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>
        新发现畜禽品种添加
    </title>
</head>
<body style="background-color: #ffffff">
<div id="app">

    <template v-loading="indexLoading">
        <el-page-header @back="goBack" content="添加页面">
        </el-page-header>
        <el-divider></el-divider>
        <el-row justify="space-around" type="flex">
            <el-col :span="15" style="border-right: 1px solid #a88d8d">
                <el-col :push=20>
                    <el-button :loading="action" @click="oneClickUpload" plain size="mini" type="success">一键上传
                    </el-button>
                </el-col>
                <el-collapse-transition>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column label="序号" type="index"></el-table-column>
                        <el-table-column label="动物种类" prop="culturedIdName"></el-table-column>
                        <el-table-column label="品种类型" prop="varietyTypeName"></el-table-column>
                        <el-table-column label="品种名" prop="varietyName"></el-table-column>
                        <el-table-column label="审核品种" prop="existVarietyIdName"></el-table-column>
                        <el-table-column label="动物描述" prop="varietyCon"></el-table-column>
                        <el-table-column label="备注" prop="remark"></el-table-column>
                        <el-table-column label="操作" width="160">
                            <template slot-scope="scope">
                                <div v-loading="scope.row.action">
                                    <el-button :disabled="scope.row.action"
                                               @click="handleAction(scope.$index, scope.row,1)" size="mini">上传
                                    </el-button>
                                    <el-button :disabled="scope.row.action"
                                               @click="handleAction(scope.$index, scope.row,2)" size="mini">编辑
                                    </el-button>
                                    <el-popconfirm
                                            @confirm="handleAction(scope.$index, scope.row,3)" cancel-button-text='不用了'
                                            confirm-button-text='好的' icon="el-icon-info"
                                            icon-color="red"
                                            title="这是一段内容确定删除吗？">
                                        <el-button :disabled="scope.row.action" size="mini" slot="reference"
                                                   type="danger">删除
                                        </el-button>
                                    </el-popconfirm>
                                </div>
                            </template>

                        </el-table-column>
                    </el-table>
                </el-collapse-transition>
            </el-col>
            <el-col :span="8">
                <el-form :key="num" :model="ruleForm" :rules="formRules" label-position="top" ref="ruleForm">
                    <table>
                        <tr>
                            <td colspan="2">
                                <el-form-item label="品种名" prop="varietyName">
                                    <el-input placeholder="品种名" size="small"
                                              v-model.number="ruleForm.varietyName"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-form-item label="动物种类" prop="culturedId">
                                    <el-select placeholder="动物种类" size="small" v-model="ruleForm.culturedId">
                                        <el-option :key="i" :label="item.label"
                                                   :value="item.value" v-for="(item,i) of culturedIds"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="品种类型" prop="varietyType">
                                    <el-select placeholder="品种类型" size="small" v-model="ruleForm.varietyType">
                                        <el-option :key="i" :label="item.label"
                                                   :value="item.value" v-for="(item,i) of varietyTypes"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <el-form-item label="审核品种" prop="existVarietyId">
                                    <el-select placeholder="审核品种" size="small" v-model="ruleForm.existVarietyId">
                                        <el-option :key="i" :label="item.label"
                                                   :value="item.value" v-for="(item,i) of existVarietyIds"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <el-form-item label="动物描述" prop="varietyCon">
                                    <el-input :row="2" placeholder="动物描述" size="small"
                                              type="textarea"
                                              v-model.number="ruleForm.varietyCon"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <el-form-item label="备注" prop="remark">
                                    <el-input :row="2" placeholder="备注" size="small"
                                              type="textarea"
                                              v-model.number="ruleForm.remark"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                    <el-form-item label="照片">
                        <el-upload :on-success="updateSuccess" action="/upload"
                                   list-type="picture-card" ref="upload">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item v-if="ruleForm.tableIndex===''">
                        <el-button @click="submitForm('ruleForm')" type="primary">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                    <el-form-item v-else>
                        <el-button @click="submitForm('ruleForm')" type="primary">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="/static/vendor/vue.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                indexLoading: true,
                action: false,
                successLoading: true,
                ruleForm: {
                    tableIndex: '',
                    culturedId: '',
                    varietyType: '',
                    varietyName: '',
                    existVarietyId: '',
                    varietyCon: '',
                    remark: '',
                    urlPaths: []
                },
                num: 0,
                tableData: [],
                filter: '',
                culturedIds: [],
                varietyTypes: [],
                existVarietyIds: [],
                formRules: {
                    culturedId: [
                        {required: true, message: '请选择动物种类', trigger: 'change'}
                    ],
                    varietyType: [
                        {required: true, message: '请选择品种类型', trigger: 'change'}
                    ],
                    varietyName: [
                        {required: true, message: '请输入品种名', trigger: 'blur'},
                    ],
                    existVarietyId: [
                        {required: true, message: '请选择审核品种', trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let parse = {}
                        parse = JSON.parse(JSON.stringify(this.ruleForm));
                        for (let culturedId of this.culturedIds) {
                            if (culturedId.value === parse.culturedId) {
                                parse.culturedIdName = culturedId.label
                            }
                        }
                        for (let varietyType of this.varietyTypes) {
                            if (varietyType.value === parse.varietyType) {
                                parse.varietyTypeName = varietyType.label
                            }
                        }
                        for (let items of this.existVarietyIds) {
                            if (items.value === parse.existVarietyId) {
                                parse.existVarietyIdName = items.label
                            }
                        }
                        let tableIndex = parse.tableIndex;
                        let msg = ''
                        if (tableIndex !== '') {
                            this.tableData.splice(tableIndex, 1, parse)
                            this.ruleForm.tableIndex = ''
                            msg = '修改成功'
                        } else {
                            parse.action = false
                            parse.successLoading = true
                            this.tableData.push(parse);
                            msg = '创建成功'
                        }
                        this.resetForm(formName)
                        this.$message({
                            message: msg,
                            type: 'success'
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            oneClickUpload() {
                let arr = this.tableData
                for (let i = 0; i < arr.length; i++) {
                    this.handleAction(0, arr[i], 1)
                }
            },
            handleAction(index, row, type) {
                switch (type) {
                    case 1: {
                        row.action = true
                        /*上传*/
                        let bean = {
                            newVarietyId: row.newVarietyId,
                            culturedId: row.culturedId,
                            varietyType: row.varietyType,
                            varietyName: row.varietyName,
                            existVarietyId: row.existVarietyId,
                            varietyCon: row.varietyCon,
                            remark: row.remark,
                            imgUrl: row.urlPaths.join(",")
                        }
                        console.info(bean)
                        let res = top.ajax.synclBody("/yxProNewVariety/insertOne", bean);
                        if (res.data === 1) {
                            setTimeout(() => {
                                this.tableData.splice(index, 1);
                                this.$message({
                                    message: '上传成功',
                                    type: 'success'
                                });
                            }, 500);
                        } else {
                            this.$message.error('上传失败');
                            row.action = false
                        }
                        break;
                    }
                    case 2: {
                        /*编辑*/
                        row.tableIndex = index
                        this.ruleForm = row
                        break;
                    }
                    case 3: {
                        /*删除*/
                        this.tableData.splice(index, 1)
                        console.log(index, row);
                        break;
                    }
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$refs.upload.clearFiles();
            },

            updateSuccess(response, file, fileList) {
                if (response.status === "200") {
                    let url = response.data.url;
                    this.ruleForm.urlPaths.push(url)
                }
            },
            goBack() {
                window.history.back();
            },
            getCulturedIds() {
                let datas = top.ajax.syncl("/yxProCultured/queryAll", "");
                let culturedIds = [];
                for (let data of datas) {
                    let bean = {
                        value: data.culturedId,
                        label: data.culturedName
                    }
                    culturedIds.push(bean)
                }
                this.culturedIds = culturedIds;
            },
            getVarietyTypes() {
                let dicts = top.ajax.syncl("/dictCategory/getDictList/variety_type", "");
                let varietyTypes = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    varietyTypes.push(bean)
                }
                this.varietyTypes = varietyTypes;
            },
            getExistVarietyIds() {
                let items = top.ajax.syncl("/yxProExistVariety/queryAll", "");
                let existVarietyIds = [];
                for (let item of items) {
                    let bean = {
                        value: item.existVarietyId,
                        label: item.varietyName
                    }
                    existVarietyIds.push(bean)
                }
                this.existVarietyIds = existVarietyIds;
            },
        },
        mounted: function () {
            this.getCulturedIds()
            this.getVarietyTypes()
            this.getExistVarietyIds()
        },
        created() {
            this.indexLoading = false
        },
    })
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
</html>
